<template>
  <view class="select-category-counter">
    <u-navbar
      @rightClick="rightClick"
      title="选择分类"
      rightIcon="question-circle"
      autoBack
    />
    <view class="category-counter-content">
      <view class="content-title">请选择您擅长的类目</view>
      <view class="content-items-main">
        <view
          class="items-main"
          @click="handleSelectId(item)"
          v-for="item in categoryList"
          :key="item.id"
          :class="{ active: selectCategoryId.includes(String(item.id)) }"
        >
          <view class="items-trip" v-if="item.type">新增</view>
          {{ item.name }}
        </view>
      </view>
      <view class="category-bottom">
        <view class="select-count">已选{{ selectCategoryLength }}/10个</view>
        <view class="next-sort-btn" @click="handleNextCategory">下一步类目排序</view>
      </view>
    </view>
    <!-- 右上角提示 -->
    <u-popup
      :show="showRightExplain"
      :round="4"
      :customStyle="{ width: '90%' }"
      mode="center"
      @close="close"
    >
      <view class="total-price-popup-counter">
        <view class="total-price-title">一级类目变更说明</view>
        <view class="explain-content">1.入住成功30天内不限制更改次数</view>
        <view class="explain-content"
          >2.入住成功30天内后，每30天可更改一次</view
        >
        <view class="know-btn" @click="showRightExplain = false">我知道了</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      categoryList: [
        { id: 1, name: "家具", type: 1 },
        { id: 2, name: "灯具", type: 0 },
        { id: 3, name: "卫浴", type: 0 },
        { id: 4, name: "强制", type: 0 },
        { id: 5, name: "健身器材", type: 0 },
        { id: 6, name: "净水器", type: 1 },
        { id: 7, name: "门", type: 1 },
        { id: 8, name: "办公设备", type: 1 },
        { id: 9, name: "汽车养护", type: 0 },
        { id: 10, name: "充电桩", type: 0 },
        { id: 11, name: "家庭保洁", type: 0 },
        { id: 13, name: "电脑网络", type: 1 },
        { id: 12, name: "晾衣架", type: 0 },
      ],
      selectCategoryId: ["1"],
      selectCategoryMap: new Map(),
      showRightExplain: false,
    };
  },
  computed: {
    selectCategoryLength() {
      return this.selectCategoryId.length;
    },
  },
  mounted() {
    this.selectCategoryId?.map((item) => {
      this.selectCategoryMap.set(item);
    });
  },
  methods: {
    close() {
      this.showRightExplain = false
    },
    // right
    rightClick() {
      this.showRightExplain = true;
    },
    handleSelectId(item) {
      if (typeof item.id == "number") {
        item.id = String(item.id);
      }
      if (this.selectCategoryMap.has(item.id)) {
        this.selectCategoryMap.delete(item.id);
      } else {
        this.selectCategoryMap.set(item.id);
      }
      this.selectCategoryId = Array.from(this.selectCategoryMap.keys());
    },
    // 下一步
    handleNextCategory() {
      uni.navigateTo({
        url: '/pages/drawerPage/skill/sortCategory'
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.category-counter-content {
  height: calc(100vh - 100rpx); 
  background: #fff;
  margin-top: 100rpx;
  overflow: auto;
  padding: 24rpx;
  box-sizing: border-box;
  .content-title {
    padding: 24rpx 0;
    color: #333;
    font-size: 30rpx;
    font-weight: 500;
  }
  .content-items-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 28rpx 32rpx;
    .items-main {
      width: 29%;
      padding: 16rpx 0;
      background: #f7f9fa;
      border-radius: 8rpx;
      color: #333;
      font-size: 26rpx;
      text-align: center;
      position: relative;
      border: 2rpx solid transparent;
      &.active {
        border-color: #579af8;
        color: #579af8;
        background: #ebf8fe;
      }
      .items-trip {
        padding: 2rpx 8rpx;
        background: #ed7154;
        color: #fff;
        font-size: 18rpx;
        border-radius: 4rpx;
        position: absolute;
        right: 0;
        top: -10rpx;
      }
    }
  }
  .category-bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 20rpx;
    gap: 32rpx;
    .select-count {
      width: 140rpx;
      color: #999;
      font-size: 24rpx;
    }
    .next-sort-btn {
      width: 500rpx;
      padding: 20rpx 0;
      text-align: center;
      background: #4ca9ec;
      color: #fff;
      font-size: 28rpx;
      border-radius: 12rpx;
    }
  }
}
.total-price-popup-counter {
  padding: 60rpx 120rpx;
  box-sizing: border-box;
  .total-price-title {
    font-size: 32rpx;
    color: #000;
    font-weight: 500;
    text-align: center;
    margin-bottom: 32rpx;
  }
  .explain-content {
    font-size: 28rpx;
    color: #000;
  }
  .know-btn {
    width: 380rpx;
    padding: 28rpx 0;
    background: #50aee8;
    border-radius: 8rpx;
    color: #fff;
    font-size: 28rpx;
    text-align: center;
    box-sizing: border-box;
    margin: 42rpx auto 0 auto;
  }
}
</style>
